﻿@page "/docs/components/pagination"

<Seo Canonical="/docs/components/pagination" Title="Blazorise Pagination system" Description="Learn to use and work with the Blazorise Pagination component that enables the user to select a specific page from a range of pages." />

<DocsPageTitle Path="Components/Pagination">
    Blazorise Pagination component
</DocsPageTitle>

<DocsPageLead>
    A responsive, usable, and flexible pagination.
</DocsPageLead>

<DocsPageParagraph>
    The <Code Tag>Pagination</Code> component enables the user to select a specific page from a range of pages.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Paragraph>
            <Code Tag>Pagination</Code> the main container.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>PaginationItem</Code> the pagination item, which can be active or not.
                </Paragraph>
                <UnorderedList>
                    <UnorderedListItem>
                        <Paragraph>
                            <Code Tag>PaginationLink</Code> the link to the destination page, which will trigger the <Code Tag>Clicked</Code> event.
                        </Paragraph>
                    </UnorderedListItem>
                </UnorderedList>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicPaginationExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicPaginationExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dynamic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DynamicPaginationExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DynamicPaginationExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Pagination),typeof(PaginationItem),typeof(PaginationLink)]" />